<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        .input{
            height: 40px;
            background-color: #337ab7;
            border-color: #2e6da4;
            color: white;
            font-size: 16px;
            border-radius: 15px;
            outline: none;
        }

        .input:hover{
           height: 40px;
            background-color: #4f0c75;
            border-color: #2e6da4; 
            border-radius: 15px;
            color: white;
            font-size: 16px;
            cursor: pointer;
        }

        .numInp{
            outline: none;
            font-size: 16px;
            padding: 6px;
            height: 40px;
            box-sizing: border-box;
        }

    </style>
</head>
<body>
    <div style="text-align: center;">

    <h1>Hello Tiny Server</h1>
   <h2>图片测试<h2>
   <input  type="button" value="图片测试" id="img" class="input" />
   <div id="showImg" style="margin-top: 10px;">

   </div>
   <h2>文本文件测试</h2>
   <input type="button" value="文本测试" id="text" class="input"/>
   <div style="margin-top: 20px;">
    <textarea id="showText" style="width: 200px;height: 200px;font-size: 20px;padding:20px;"></textarea>
   </div>
   <h2>html文件测试</h2>
   <input type="button" value="html文本测试" id="html" class="input" /> 
   <div id="showHtml" style="text-align: center;">
    
   </div>
   <h2>测试动态请求</h2>
   <div>
       <input type="number" placeholder="输入数字1" id="inp1" class="numInp">
    <input type="number" placeholder="输入数字2" id="inp2" class="numInp">
   </div>
   <div style="margin-top: 20px;">
       <input type="button" value="发送请求" id="send" class="input">
   </div>
    
    <p>得到的结果是 : <span id="num" style="font-size: 25px;"></span></p>
    </div>
   
    
    <script>

        // 动态内容测试
        document.getElementById("send").addEventListener("click",()=>{

        let hxr = new XMLHttpRequest();

        let url = `/cgi-bin/add?`

        let inp1 = document.getElementById("inp1").value

        let inp2 = document.getElementById("inp2").value

        hxr.open("GET",url+inp1+"&"+inp2);

        hxr.onreadystatechange = function(e){

            if(hxr.readyState == 4){

                if(hxr.status == 200){

                    console.log(hxr.responseText)

                    alert("请求成功");

                    document.getElementById("num").innerText = JSON.parse(hxr.responseText).data

                }

            }
            
        }

        hxr.send();

       })

       document.getElementById("img").addEventListener("click",()=>{

           let parent = document.getElementById("showImg");

           let img = new Image(400,400)

           img.src = "/static/ReadMe.jpg"

           parent.appendChild(img)

       })

       document.getElementById("text").addEventListener("click",()=>{


        let hxr = new XMLHttpRequest();

        let url = `/static/ReadMe.txt`

        hxr.open("GET",url);

        hxr.onreadystatechange = function(e){

            if(hxr.readyState == 4){

                if(hxr.status == 200){

                    document.getElementById("showText").innerText = hxr.responseText

                }

            }
            
        }

        hxr.send();

       })
       
       document.getElementById("html").addEventListener("click",()=>{

        let parent = document.getElementById("showHtml");

        let iframe = document.createElement("iframe");

        iframe.src = "/static/test.html";

        iframe.style.height = "400px";
        iframe.style.width = "400px";
        iframe.style.marginTop = "10px";

        parent.appendChild(iframe)


     })

    </script>
</body>
</html>